<template>
  <inline-Modal
    :visible="visible"
    :title="rows.title"
    :showOk="isOk"
    @ok="handelOk()"
    @cancel="handelCancel()"
  >
    <div class="add-application-container">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :hideRequiredMark="isDisabled"
      >
        <a-row :gutter="0">
          <a-col :span="12">
            <a-form-model-item label="项目名称" prop="proUuid">
              <a-select
                showSearch
                :filter-option="filterOption"
                v-model="form.proUuid"
                :loading="projectLoading"
                placeholder="请选择项目"
                @change="changeProject($event)"
                :disabled="isDisabled"
              >
                <a-select-option
                  :value="item.uuid"
                  v-for="item in projectSoucre"
                  :key="item.uuid"
                >
                  {{ item.proName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="申请单位" prop="applicationUnit">
              <a-input
                v-model="form.applicationUnit"
                placeholder="请输入申请单位"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="0">
          <a-col :span="18">
            <a-form-model-item label="地址" prop="proAddress">
              <a-input
                v-model="form.proAddress"
                placeholder="请输入项目详细地址"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="邮编" prop="zipCode">
              <a-input
                v-model="form.zipCode"
                placeholder="请输入邮编"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="0">
          <a-col :span="8">
            <a-form-model-item label="联系人" prop="contacts">
              <a-input
                v-model="form.contacts"
                placeholder="请输入联系人"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="职务职称" prop="officialCapacity">
              <a-input
                v-model="form.officialCapacity"
                placeholder="请输入职务职称"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="联系电话" prop="telephone">
              <a-input
                v-model="form.telephone"
                placeholder="请输入联系电话"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="0">
          <a-col :span="8">
            <a-form-model-item label="手机" prop="mobile">
              <a-input
                v-model="form.mobile"
                placeholder="请输入手机"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="传真" prop="fax">
              <a-input
                v-model="form.fax"
                placeholder="请输入传真"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="Email" prop="email">
              <a-input
                v-model="form.email"
                placeholder="请输入Email"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item
              label="工程质量监督机构"
              prop="supervisionAgency"
            >
              <a-input
                v-model="form.supervisionAgency"
                placeholder="请输入工程质量监督机构"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="参建单位" prop="participatingUnits">
              <a-input
                v-model="form.participatingUnits"
                type="textarea"
                :rows="4"
                placeholder="请输入参建单位并用逗号隔开"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="项目概况" prop="introduction">
              <a-input
                v-model="form.introduction"
                type="textarea"
                :rows="4"
                placeholder="包括项目建设的意义、项目规模、重点建设内容、项目特征特色、投资情况及建设工期等（1000 字以内）"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="项目创建计划" prop="creationPlan">
              <a-input
                v-model="form.creationPlan"
                type="textarea"
                :rows="4"
                placeholder="项目创建目标指标、攻关方向、预期成果、保障措施等方面"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="审查意见" prop="reviewOpinions">
              <a-input
                v-model="form.reviewOpinions"
                type="textarea"
                :rows="4"
                placeholder="设区市交通运输主管部门或省交建局审查意见"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </inline-Modal>
</template>

<script>
import {
  saveProjectApprove,
  updateProjectApprove,
  getProjectApproveDetail,
  updateProApproveStatus,
} from "@/api/qualityEngineering";
import { getAllProListByQX } from "@/api/common";
import formMixins from "./formMixins";
export default {
  mixins: [formMixins],
  props: {
    visible: {
      type: Boolean,
      required: false,
    },
    rows: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      form: {
        //项目id
        proUuid: undefined,
        //申请单位
        applicationUnit: "",
        //项目地址
        proAddress: "",
        //邮编
        zipCode: "",
        //联系人
        contacts: "",
        //职务职称
        officialCapacity: "",
        //联系电话
        telephone: "",
        //手机
        mobile: "",
        //传真
        fax: "",
        //邮箱
        email: "",
        //工程质量 监督机构
        supervisionAgency: "",
        //参建单位
        participatingUnits: "",
        //项目概况
        introduction: "",
        //项目创建计划
        creationPlan: "",
        //审查意见
        reviewOpinions: "",
        //状态
        status: 0,
      },
      projectSoucre: [],
      projectLoading: false,
    };
  },
  computed: {
    isOk() {
      let { title } = this.rows;
      if (title == "查看") return false;
      else return true;
    },
    isDisabled() {
      let { title } = this.rows;
      if (title == "查看") return true;
      else return false;
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getProjectData();
          let { uuid } = this.rows;
          if (uuid) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },

  methods: {
    saveProjectApprove,
    updateProjectApprove,
    changeProject(e) {
      let obj = this.projectSoucre.find((v) => v.proCode == e);
      this.form.proAddress = obj.address;
      this.form.introduction = obj.introduction;
    },
    //查询项目列表
    getProjectData() {
      this.projectLoading = true;
      return new Promise((resolve, reject) => {
        getAllProListByQX()
          .then((res) => {
            this.projectSoucre = res?.data ?? [];
            resolve();
          })
          .catch((_) => {
            this.projectSoucre = [];
            reject();
          })
          .finally((_) => {
            this.projectLoading = false;
          });
      });
    },
    //查询详情
    getDetail() {
      return new Promise((resolve, reject) => {
        let { uuid } = this.rows;
        getProjectApproveDetail({ uuid })
          .then((res) => {
            this.form = {
              //项目id
              proUuid: res.proUuid,
              //申请单位
              applicationUnit: res.applicationUnit,
              //项目地址
              proAddress: res.proAddress,
              //邮编
              zipCode: res.zipCode,
              //联系人
              contacts: res.contacts,
              //职务职称
              officialCapacity: res.officialCapacity,
              //联系电话
              telephone: res.telephone,
              //手机
              mobile: res.mobile,
              //传真
              fax: res.fax,
              //邮箱
              email: res.email,
              //工程质量 监督机构
              supervisionAgency: res.supervisionAgency,
              //参建单位
              participatingUnits: res.participatingUnits,
              //项目概况
              introduction: res.introduction,
              //项目创建计划
              creationPlan: res.creationPlan,
              //审查意见
              reviewOpinions: res.reviewOpinions,
              //状态
              status: res.status,
            };
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    handelOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { uuid } = this.rows;
          let { form } = this;
          let formJson = "",
            event = "";
          if (uuid) {
            //编辑
            formJson = { uuid, ...form };
            event = "updateProjectApprove";
          } else {
            //新增
            formJson = form;
            event = "saveProjectApprove";
          }
          this[event](formJson)
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success(
                  res.message ? res.message : "操作成功",
                  1.5
                );
                this.$emit("ok");
              } else {
                this.$message.error(res?.message ?? "操作失败");
              }
            })
            .catch((_) => {})
            .finally((_) => {});
        }
      });
    },

    handelCancel() {
      this.$emit("cancel");
    },
    //更新状态
    updateStatus(status = 0) {
      return new Promise((resolve, reject) => {
        updateProApproveStatus({
          proUuid: this.rows.proUuid,
          uuid: this.rows.uuid,
          status,
        })
          .then((res) => {
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  destroyed() {
    let { title } = this.rows;
    if (this.visible && title == "编辑") {
      this.updateStatus(0);
    }
  },
};
</script>

<style lang="scss" scoped>
.add-application-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /deep/.ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 150px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
